<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>维修人员管理</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<!-- App favicon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico">

	<!-- App css -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
	<!-- layer插件 -->
	<link rel="stylesheet" type="text/css" href="plugins/layer2.4/skin/layer.css" />

	<!-- bootstrap-select -->
	<link rel="stylesheet" type="text/css" href="plugins/bootstrap-select/css/bootstrap-select.min.css" />
	<!-- <link href="assets/css/tntreebox.css?v=27" rel="stylesheet" type="text/css"> -->
	<script src="assets/js/modernizr.min.js"></script>

	<style>
		.selectBox {
			/* 控制选中框与文字的距离 */
			margin-right: 8px;
		}
	</style>

</head>

<body>

	<!-- Begin page -->
	<div id="wrapper">

		<!-- ============================================================== -->
		<!-- 页面内容开始 -->
		<!-- ============================================================== -->

		<!-- Start Page content -->
		<div class="my-content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12">
						<div class="card-box">
							<h4 class="m-t-0 m-b-30 header-title">添加维修人员</h4>
							<form class="form-horizontal" role="form">
								<div class="form-group row">
									<label for="houseId" class="col-3 col-form-label">屠宰市场名称</label>
									<div class="col-9">
										<select class="selectpicker form-control" id="houseId" name="houseId"
											title="屠宰市场" data-live-search="true" data-hide-disabled="ture"
											data-actions-box="true">
										</select>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-3 col-form-label">所需维修人员</label>
									<div class="col-9" id="checkBoxes" name="checkBoxes"
										style="padding: 20px 0 20px 10px; border: 0.5px solid #dee2e6; margin: 0 auto;">
									</div>
								</div>
								<div class="form-group mb-0 justify-content-end row">
									<div class="col-9">
										<button type="submit" class="btn btn-primary waves-effect">提交</button>
										<button type="button" onclick="layer_close()"
											class="btn btn-danger waves-effect">关闭</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>

			</div>
			<!-- container -->

		</div>

		<!-- ============================================================== -->
		<!-- End Right content here -->
		<!-- ============================================================== -->

	</div>
	<!-- END wrapper -->

	<!-- jQuery  -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.bundle.min.js"></script>
	<script src="assets/js/metisMenu.min.js"></script>
	<script src="assets/js/waves.js"></script>
	<script src="assets/js/jquery.slimscroll.js"></script>

	<!-- <script src="assets/js/tntreebox.js?v=35"></script> -->

	<!-- App js -->
	<script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>
	<script src="assets/js/jquery.core.js"></script>
	<script src="assets/js/jquery.app.js"></script>
	<script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>

	<!-- 表单验证 -->
	<script src="plugins/jquery.form.js/jquery.form.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/validate-methods.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/messages_zh.js" type="text/javascript" charset="utf-8"></script>
	<!-- bootstrap-select -->
	<script src="plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>

	<!-- layer插件 -->
	<script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>

	<!-- datatables插件 -->
	<script type="text/javascript">
		$(function () {
			//动态调用展示三联级
			// showChecked();
			// tnTreeBox('treebox', 'arr2', data, checkBoxArr);

			// 获取屠宰市场名称列表
			$.ajax({
				type: "get",
				url: URL + 'slaughterHouse',
				async: false,
				dataType: "json",
				success: function (data) {
					data = data.object
					for (var i = 0; i < data.length; i++) {
						var options = $('<option value="' + data[i].id + '">' + data[i].name +
							'</option>')
						$("#houseId").append(options);
					}
					$('.selectpicker').selectpicker('refresh');
					$('.selectpicker').selectpicker('render');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					networkError(XMLHttpRequest, textStatus, errorThrown)
				}
			});


			// 获取所有维修人员列表
			$.ajax({
				type: "get",
				url: URL + 'queryRepairs',
				async: false,
				dataType: "json",
				success: function (data) {

					data = data.object

					var tempBox = '';
					for (let i = 0; i < data.length; i++) {
						tempBox += '<input class="selectBox" name="query" type="checkbox" value="' + data[
							i].id + '" /><span>' + data[i].name + '</span></br>'
					}
					$("#checkBoxes").append(tempBox)
					// $("#housename").attr("placeholder",data.name);

				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					networkError(XMLHttpRequest, textStatus, errorThrown)
				}
			});

			var houseId;
			// 拼接的路径，默认调用接口add
			var pathUrl;
			// 存放已有的维修人员的ID
			var selectedIds = [];
			// 存放所有的维修人员
			var allIds = $(".selectBox")

			$("#houseId").change(function () {
				// console.log(1);
				houseId = $("#houseId").val()

				// 先将复选框清空，防止影响后续的选中
				$("#checkBoxes input[type='checkbox']").each(function () {
					this.checked = false
				})

				// 默认赋值为add
				pathUrl = 'slaughterHouse/addRepair';

				// 判断该屠宰场有没有维修人员，如果有，使用update接口
				$.ajax({
					type: "get",
					url: URL + 'slaughterHouse/findRepairs?houseId=' + houseId,
					async: false,
					dataType: "json",
					success: function (data) {
						data = data.object

						// 数组有元素则证明有维修人员
						if (data.length != 0) {
							// 获取里面的维修人员ID，存入数组
							for (let i = 0; i < data.length; i++) {
								selectedIds.push(data[i].id)
							}
							// 对数据进行回显
							for (let j = 0; j < selectedIds.length; j++) {
								for (let k = 0; k < $(".selectBox").length; k++) {
									if ($(".selectBox")[k].value === selectedIds[j]) {
										$(".selectBox")[k].checked = true
									}
								}
							}
							// 回显后将数组清空
							selectedIds = []
							pathUrl = 'slaughterHouse/updateRepair'
						} 

					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						networkError(XMLHttpRequest, textStatus, errorThrown)
					}
				});
			})


			//表单验证
			$("form").validate({
				rules: {
					houseId: {
						required: true,
					},
					query: {
						required: true,
						minlength: 1
					}
				},
				onkeyup: false,
				focusCleanup: true,
				success: "valid",
				submitHandler: function (form) {

					// 获取页面中选中的ID
					var checked = $("input[type='checkbox']:checked").val([]);
					var ids = [];
					for (let i = 0; i < checked.length; i++) {
						ids.push(checked[i].value)
					}

					var userid = getCookie("userid");
					var index = parent.layer.getFrameIndex(window.name);
					$(form).ajaxSubmit({
						type: "POST",
						url: URL + pathUrl,
						data: {
							"houseId": houseId,
							"ids": ids.join(",")
						},
						success: function (data) {
							parent.layer.msg('添加成功!', {
								icon: 1,
								time: 1000
							});
							setTimeout(function () {
								parent.$(".btn-refresh").click();
								parent.layer.close(index);
							}, 1000);

						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							networkError(XMLHttpRequest, textStatus, errorThrown)
						}
					});
				}
			});
		});
	</script>

</body>

</html>